
import React, { Component } from "react";

const MARGIN_DEFAULT = [20, 20, 20, 20];

class SmartStackDIV extends Component {
    constructor(props) {
        super(props);
        this.state = {
        }
    }

    renderColumns(data, height, colWidth, color, handleClick, activeItem, max) {
        const columns = [];
        const highest = max + 1;
        for (const col of data) {
            const heightCol = height * (col.yAxisData/highest) + 4; 
            const colDiv = (
                <div className="stackColumnWrapper" onClick={() => handleClick(col.xAxisData)} style={{width: colWidth, height: height}}>
                    <div className="column_width_hack" style={{height: heightCol}}>
                        <span className="line" style={{height: height}}></span>
                        <div className={`column${activeItem === col.xAxisData ? ' active': ''}`}>
                        </div>
                    </div>
                </div>
            )
            columns.push(colDiv)
        }
        return columns
    }

    render() {
        const {
            chartData,
            margin = MARGIN_DEFAULT,
            color = "#3282FA",
            width = document.body.clientWidth,
            height = 400,
            colWidth,
            handleClick = ()=>{},
            activeItem
        } = this.props;
        const data = chartData

        let max = 0;
        data.map((item, index) => {
            max = item.yAxisData > max ? item.yAxisData : max;
        })
        // data.sort((i, j)=>{
        //     return j.yAxisData - i.yAxisData
        // })
        // || [
        //     { "yAxisData": 10, "xAxisData": "tokyo", "name": "tokyo"},
        //     { "yAxisData": 4, "xAxisData": "newYork", "name": "newYork" },
        //     { "yAxisData": 3, "xAxisData": "berlin", "name": "berlin" }
        // ];

        //为了让柱状图在有项无值的情况下显示

        return (
            <div style={{ width: width, height: height, padding:'20px 0 0 0' }}>
                <div className="smartStackDIV" 
                    style={{height: height, width: width, marginLeft: margin[3], marginRight: margin[1]}}>
                    {this.renderColumns(data, height, colWidth, color, handleClick, activeItem, max)}
                </div>
            </div>
        )
    }
}

export default SmartStackDIV